<template>
	<view>
		<view class="bigBox">
			<!-- 标题栏 -->
			<head-navbar :back="true" :bgColor="'#eee'" class="headNav">
				<view class="">商品列表</view>
			</head-navbar>
			<view class="header">
				<view class="top">
					<view class="searchBox" style="flex-direction: row;">
						<image src="../../../static/img/searchicon.png" mode=""></image>
						<input type="text" placeholder="请输入订单号/宝贝/关键词" :value="proNameCur" />
					</view>
					<view style="color: #313131;font-size: 30upx;">搜索</view>
				</view>
			</view>
			<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
			<me-tabs v-model="tabIndex" :tabs="tabs" :fixed="false" :tab-width="130" :height="50" :bgColor="'#eee' " class="tabs"></me-tabs>
			<view class="swiperGoods">
				<view class="item">
					<image src="../../../static/img/avtr.png" mode="" style="width: 120upx;height: 120upx;"></image>
					<view>居家日用</view>
				</view>
				<view class="item">
					<image src="../../../static/img/avtr.png" mode="" style="width: 120upx;height: 120upx;"></image>
					<view>居家日用</view>
				</view>
				<view class="item">
					<image src="../../../static/img/avtr.png" mode="" style="width: 120upx;height: 120upx;"></image>
					<view>居家日用</view>
				</view>
				<view class="item">
					<image src="../../../static/img/avtr.png" mode="" style="width: 120upx;height: 120upx;"></image>
					<view>居家日用</view>
				</view>
			</view>
		</view>

		<!-- <view style="height: 350upx;"></view> -->
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item :i="i" :index="tabIndex" :tabs="tabs"></mescroll-item>
			</swiper-item>
		</swiper>
	</view>

</template>
<script>
	import MescrollItem from "./mescroll-swiper-item.vue";
	import meTabs from "@/components/me-tabs/me-tabs.vue";
	export default {
		components: {
			MescrollItem,
			meTabs
		},
		data() {
			return {
				statusBarHeight:0,
				tabsHei: '',
				navH: 0,
				navheight: 0,
				proNameCur: '',
				goodsList: [{
					imgUrl: '../../../static/img/demo.png',
					id: 0,
					title: "商品商品的哈岁的杀害大厦大厦的哈实打实的哈桑",
					price: "￥120.00"
				}],
				height: "400px", // 需要固定swiper的高度
				tabs: [{
					name: '全部'
				}, {
					name: '奶粉'
				}, {
					name: '面膜'
				}, {
					name: '图书'
				}, {
					name: '果汁'
				}, {
					name: '奶瓶'
				}, {
					name: '美素'
				}, {
					name: '花王'
				}, {
					name: '韩蜜'
				}],
				tabIndex: 0 // 当前tab的下标

			}
		},
		onLoad() {
			// 需要固定swiper的高度
			this.height = uni.getSystemInfoSync().windowHeight + 'px'
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			console.log(this.statusBarHeight)
		},
		onReady() {},
		mounted() {
			var that = this;
			let theNode = uni.createSelectorQuery().select(".headNav");
			let head = uni.createSelectorQuery().select(".header");
			let tabs = uni.createSelectorQuery().select('.tabs');
			var headH = '';
			var navH = '';
			var tabsHei = '';
			theNode.boundingClientRect((data) => {
				that.navH = data.height + 'px'
				headH = data.height;
			}).exec()
			head.boundingClientRect((data) => {
				navH = data.height;
			}).exec()
			tabs.boundingClientRect((data) => {
				tabsHei = data.height;
			}).exec()
			that.navheight = headH + navH + 'px';
			that.tabsHei = headH + navH + tabsHei + 'px';
		},
		methods: {
			// 轮播菜单
			swiperChange(e) {
				this.tabIndex = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.bigBox{
		position: fixed;
		z-index: 999;
		top: 0;
		left:0;
	}
	.swiperGoods {
		background-color: #eee;
		padding: 10upx;
		width: 750upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 999;

		.item {
			text-align: center;
		}
	}

	swiper {
		width: 750upx;
	}

	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	.header {
		width: 750upx;
		height: 150upx;
		background-color: #eee;
		// margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// position: fixed;
		z-index: 999;

		>.top {
			box-sizing: border-box;
			padding: 20upx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			>.searchIcon {
				font-size: 35upx;
				margin-left: 30upx;
			}

			>.searchBox {
				background-color: #fff;
				display: flex;
				align-items: center;
				border-radius: 20px;
				box-sizing: border-box;
				width: 600upx;
				padding: 10upx 20upx;

				>image {
					width: 35upx;
					height: 30upx;
				}

				>input {
					font-size: $fontSize-base;
					margin-left: 20px;
					width: 100%;
				}
			}

			>.btnGroup {
				display: flex;
				justify-content: space-between;
				width: 15%;
				align-items: center;

				>.iconfont {
					color: $color-font;
					font-size: $fontSize-lg;
				}
			}
		}

		>.bottom {
			color: $color-font;
			font-size: $fontSize-lg;
			padding: 20upx;
		}
	}

	.navList {
		width: 750upx;
		height: 300upx;
		background: #eee;
		display: flex;
		flex-direction: inherit;
		align-items: center;

		>.item {
			width: 150upx;
			text-align: center;
			margin-left: 30upx;

			>.imgBox {
				width: 100upx;
				height: 100upx;
				margin: 0 auto;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			>.title {}
		}
	}

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.scroll-h {
		background-color: #eee;
		width: 750rpx;
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: $base-color;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: row;
	}

	.scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
	}

	.update-tips {
		position: absolute;
		left: 0;
		top: 41px;
		right: 0;
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: #FDDD9B;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.update-tips-text {
		font-size: 14px;
		color: #ffffff;
	}

	.refresh {
		width: 750rpx;
		height: 64px;
		justify-content: center;
	}

	.refresh-view {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.refresh-icon {
		width: 30px;
		height: 30px;
		transition-duration: .5s;
		transition-property: transform;
		transform: rotate(0deg);
		transform-origin: 15px 15px;
	}

	.refresh-icon-active {
		transform: rotate(180deg);
	}

	.loading-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
		color: #999999;
	}

	.loading-text {
		margin-left: 2px;
		font-size: 16px;
		color: #999999;
	}

	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 28rpx;
		color: #999;
	}
</style>
